<template>
  <div class="home">
      <ul>
        <li>
          <img src="../assets/1.png" />
          <p>首页</p>
        </li>
        <li>
          <img src="../assets/2.png" />
          <p>消息</p>
        </li>
        <li>
          <img src="../assets/3.png" />
          <p>消息</p>
        </li>
        <li>
          <img src="../assets/4.png" />
          <p>消息</p>
        </li>
      </ul>
   
  </div>
</template>

<script>
export default {};
</script>
<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  // position: relative;
}
ul {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  // text-align: center;
  border: 1px solid red;
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0px;
}
li:hover{
  color: red;
}
</style>
